<template>
    <div class="property">
        <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
        <div class="readonly_flag" :class="readonly ? 'readonly_true' : ''">
            <EnumProp :withUndefined="withUndefined" :defaultValue="defaultValue" :enumStrsList="enumStrsList"
                :readonly="readonly" v-model="enumRef">
            </EnumProp>
        </div>
    </div>
</template>

<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount } from "vue";
import EnumProp from "../commons/EnumProp.vue";
import { PropertyCompCallbackFuncParamsType } from "./base";

const props = withDefaults(defineProps<{
  property: any
}>(), {
});
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

const { property } = props
const withUndefined = property.withUndefined
const enumStrsList = property.enums


const readonly = property.readonly
const disposer = createVueDisposer(onBeforeUnmount)
const enumRef = readonly ? toReadonlyVueRef<any>(disposer, property.reactVar, s => s) : toVR<any>(disposer, property.reactVar, s => s)
const defaultValue: any = property.defaultValue

</script>
<style scoped>
.property {
  width: 100%;
  display: flex;
}

.item_name {
  width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
    height: 26px;
    line-height: 26px;
}

.readonly_flag {
  flex: 1;
}

.readonly_true {
  cursor: not-allowed;
  cursor: no-drop;
}

</style>
